<?php if(!defined('IN_FIRADIO')) {header('HTTP/1.1 403 Forbidden');exit('<h1>Access Denied</h1>');}?>
<?php $GLOBALS['script'][] = function() {?><script>
vue.data.disabled = false;
vue.data.api_status = {};
vue.data.api_status.hosts = {};
vue.data.api_config = {};
vue.data.config = {};
vue.data.config.autoreload = {};
vue.data.config.autoreload.interval = 5000;
vue.data.config.queue_status_list = {};
if (typeof(vue.watch) !== 'object') vue.watch = {};
vue.watch['config.autoreload.interval'] = function () {
    // console.log(newVal);
    clearInterval(vue.data.config.autoreload.obj);
    if (vue.data.config.autoreload.interval > 0) {
        vue.data.config.autoreload.obj = setInterval(function () {
            vue.data.form.is_autoreload = 1;
            vue.methods.submit_bnb_status();
        }, vue.data.config.autoreload.interval);
    }
};
var submit_after_result = function (that) {
    that.disabled = false;
};
vue.methods.submit_bnb_status = function () {
    const that = this;
    const form = window.clone(vue.data.form);
    vue.data.form.is_autoreload = 0;
    that.ApiPost('/panel/bnb/status.php', form).then(function (data) {
        vue.data.api_status = data.data;
        setTimeout(function() {
            if (jQuery("ul.nav-tabs").children(".active").length === 0) {
                jQuery("ul.nav-tabs li:first a").click();
            }
        }, 0);
        if (vue.data.api_status.hosts) {
            for (var key in vue.data.api_status.hosts) {
                const host = vue.data.api_status.hosts[key];
                for (var key in host.dbs) {
                    const db = host.dbs[key];
                    db.count_sum = count_sum_status(db.status);
                }
            }
        }
        submit_after_result(that);
    }, function (data) {
        console.log('reject:', data);
        submit_after_result(that);
    }).catch(function (reason) {
        console.log('catch:', reason);
        submit_after_result(that);
    })
};
function object_getkeys_when_value_istrue (obj) {
    const arr = [];
    for (key in obj) {
        if (obj[key]) arr.push(key);
    }
    return arr;
}
vue.methods.setTimeout = function (fun, timeout) {
    setTimeout(fun, timeout);
};
vue.methods.submit_bnb_config = function () {
    // 修改配置,并获取新的配置
    const that = this;
    const form = window.clone(that.form);
    if (form && form.hostid && form.dbchar) {
        form.set_queue_status_list = object_getkeys_when_value_istrue(vue.data.config.queue_status_list[form.hostid + '_' + form.dbchar]).join(',');
    }
    that.disabled = true;
    that.ApiPost('/panel/bnb/config.php', form).then(function (data) {
        vue.data.api_config = data.data;
        // api_config.bnb_config
        vue.data.config.queue_status_list = {};
        for (var hostdbc in data.data.bnb_config) {
            const bnb_config = data.data.bnb_config[hostdbc];
            if (hostdbc === '180_a') {
                bnb_config['status_list_queue'] = '0,444,450,451,452,504';
            } else {
                bnb_config['status_list_queue'] = '0,444,450,451,452,504,453,499';
            }
            const status_list_queue = bnb_config['status_list_queue'].split(',');
            const queue_status_list = (typeof(bnb_config['queue_status_list']) === 'string') ? bnb_config['queue_status_list'].split(',') : [];
            const arr = {};
            for (var key in status_list_queue) {
                const status = status_list_queue[key];
                arr[status] = (queue_status_list.indexOf(status) >= 0) ? 1 : 0;
            }
            vue.data.config.queue_status_list[hostdbc] = arr;
        }
    }, function (data) {
        console.log('reject:', data);
    })
};
/*
vue.methods.submit_bnb_recordcount = function () {
    const that = this;
    const form = window.clone(that.form);
    that.disabled = true;
    that.ApiPost('/panel/bnb/recordcount.php', form).then(function (data) {
        vue.data.api_recordcount = data.data;
    }, function (data) {
        console.log('reject:', data);
    }).catch(function (reason) {
        console.log('catch:', reason);
    })
};//*/
vue.methods.status_percent = function (c_sub, c_sum) {
    if (c_sum === 0) return '-';
    return (Math.round(c_sub * 1000 / c_sum) / 10) + '%';
};
vue.methods.bnb_config_queue_status = function (hostid, dbchar) {
    // 获取指定库的状态
    const api_config = vue.data.api_config;
    if (typeof(api_config) !== 'object') return false;
    if (typeof(api_config.bnb_config) !== 'object') return false;
    if (typeof(api_config.bnb_config[hostid + '_' + dbchar]) !== 'object') return false;
    const bnb_config = api_config.bnb_config[hostid + '_' + dbchar];
    if (parseInt(bnb_config.queue_status, 0) == 1) return true;
    return false;
};
vue.mounted = function () {
    vue.methods.submit_bnb_status();
    vue.methods.submit_bnb_config();
    //vue.methods.submit_bnb_recordcount();
    vue.watch['config.autoreload.interval']();
};
function count_sum_status(statusList) {
    var ret = [];
    for (var key in statusList) {
        const status_count_list = statusList[key].count_list;
        for (var count in status_count_list) {
            if (ret[count]) {
                ret[count] += status_count_list[count];
            } else {
                ret[count] = status_count_list[count];
            }
        }
    }
    return ret;
    alert(JSON.stringify(ret));
}
</script><?php }?>

<!-- Custom Tabs -->
<form v-on:submit="submit_bnb_status" onsubmit="return false" :disabled="disabled">
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li v-for="host of api_status.hosts" :dbhost="host.id" style="display: none;">
            <a :href="host.href" data-toggle="tab">{{host.id}}状态</a>
        </li>
        <li class="pull-left" style="font-size: 14px; padding: 8px;">
            <label style="margin: 0px 8px;"><input type="checkbox" v-model="config.display_queue_status_list" />显示接口设置</label>
        </li>
        <li class="pull-right" style="font-size: 14px; padding: 8px;">
            <select v-model="config.autoreload.interval" style="">
                <option value="1000">自动刷新/1s</option>
                <option value="3000">自动刷新/3s</option>
                <option value="5000">自动刷新/5s</option>
                <option value="0">手动刷新</option>
            </select>
            <a href="javascript:void(0)" v-on:click="form={};submit_bnb_status();"
            class="fa fa-fw fa-refresh" style="font-size: 16px; display: inline;"></a>
        </li>
    </ul>

    <div class="tab-content">
        <div v-for="host of api_status.hosts" class="tab-pane" :id="host.tab">
            <div class="row">
                <div class="col-xs-12 col-md-12 col-lg-12" v-for="db of host.dbs">
                    <table class="table table-bordered table-striped dataTable">
                        <tr align="center">
                            <td colspan="10">
                                <div class="pull-left header">
                                    <i class="fa fa-th"></i>
                                    <font>{{db.title}}状态统计</font>: 
                                    <span v-if="bnb_config_queue_status(host.id, db.dbchar)" style="color:green">已启动</span>
                                    <span v-else style="color:red">已停止</span>
                                    <button class="btn btn-default btn-xs" type="button" v-on:click="form={};form.hostid=host.id;form.dbchar=db.dbchar;form.set_queue_status='1';submit_bnb_config();">启动</button>
                                    <button class="btn btn-default btn-xs" type="button" v-on:click="form={};form.hostid=host.id;form.dbchar=db.dbchar;form.set_queue_status='2';submit_bnb_config();">停止</button>
                                    <!--可被提取任务的状态列表-->
                                    <label
                                    v-if="config.display_queue_status_list"
                                    style="margin-left: 10px; font-size: 14px;"
                                    v-for="(queue_status,name) in config.queue_status_list[host.id + '_' + db.dbchar]">
                                        <input type="checkbox" v-model="config.queue_status_list[host.id + '_' + db.dbchar][name]"
                                        v-on:change="setTimeout(function(){form={};form.hostid=host.id;form.dbchar=db.dbchar;submit_bnb_config();},0)"
                                        style="height:20px; vertical-align:text-top; margin-top:0;"
                                        />{{name}}
                                    </label>
                                    <!---->
                                </div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td>状态码</td>
                            <td v-if="0">平均每秒</td>
                            <td v-for="field of api_status.count_fields">{{field.title}}</td>
                        </td>
                        <tr v-for="stat of db.status" align="center">
                            <td>{{stat.title}}</td>
                            <td v-if="0">{{Math.round(stat.count_list[0]/60)}}</td>
                            <td v-for="(c,key) in stat.count_list">
                                <table width="100%">
                                    <tr align="center">
                                        <td width="50%" bgcolor="#eeffff">{{c}}</td>
                                        <td width="50%" bgcolor="#eeeeff">{{status_percent(c,db.count_sum[key])}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr align="center">
                            <td>合计</td>
                            <td v-for="(c,key) in db.count_sum">
                                <table width="100%">
                                    <tr align="center">
                                        <td width="50%" bgcolor="#eeffff">{{c}}</td>
                                        <td width="50%" bgcolor="#eeeeff">{{Math.round(c*10/api_status.count_fields[key].second)/10}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
            <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
    </div>
    <!-- /.col -->

</div>
</form>
